<template>
    <div class="cont">
        
        <div class="selectBook" >
            <el-input placeholder="请输入搜索内容" v-model="seekText" class="input-with-select">
                <el-button @click="goSearch()"  type="primary" 
                            :plain="true" slot="append" icon="el-icon-search">
                            搜索
                </el-button>
            </el-input>
        </div>

        <hr style="margin-bottom:10px">
        <!-- 轮播图显示 -->
        <div class="block" style="width:100%">
            <el-carousel height="25vw" trigger="click">
                <el-carousel-item v-for="item in hots" :key="item.picture">
                    <img style="width:100%;height:100%" :src="`${imgUrl}/api/public/showImg/${item.picture}`">
                </el-carousel-item>
            </el-carousel>
        </div>
		
        <div v-for="(items, index) in books" :key="index">
            <div style="border-bottom: 2px solid orangered;">
                <h4 style="color:mediumvioletred;">{{Title(index)}}</h4>
            </div>
            <div style="display: flex;width:90%;margin-left:10%;margin-top:2vh;">
                <!-- 显示 -->
                <div v-for="(item, index) in  items" :key="index" style="width: 16vw;height: 20vw;">
                    <img :src="`${imgUrl}/api/public/showImg/`+item.picture"
                    style="display: block;width: 70%;height: 65%;margin-left: 15%;"/>
                    <div style="line-height: 16px;">
                        <p align="center" style="white-space: nowrap;overflow: hidden;">
                            {{item.name}}
                        </p>
                        <p align="center">
                            ￥{{item.price}}&nbsp;
                            <el-button type="danger" size="mini" @click="buy(item)">购买</el-button>
                        </p>
                    </div>
                    
                </div>

            </div>

        </div>

    </div>
</template>
<script>
    export default {
        name:'Home',
        props:[],
        data() {
            return {
                //hot对象数组
                hots:[],
                //hots数组对象中索引为0的对象的图片
                idx:0,
                //显示的图片数量
                num:3,
                titleIdx:0,
                titles: ["点赞最高5本书","销量最高5本书","意向最高五本书"],
                books:{rateBook:[],saleBook:[], favBook:[]},
                seekText:''
            }
        },
        methods:{
            goSearch(){
                if(this.seekText.length<2){
                    this.$message.error('搜索字符不能少于两个');
                    return;
                }
                this.$router.push({
                    path : "/fore/details/details",
                    query:{seekText:this.seekText}
                })
            },
            buy(item){
                if(this.$store.state.isLogin==false){
                    this.$message.error('请登录后再购买');
                    return;
                }
                this.$postX("/api/fore/cart/addCart",{bookid:item.id,num:1,tcreate:this.df(new Date())})
                .then(function(resp){
                    if(resp.data.data==1){
                        _this.$message({
                            message: '添加购物车成功',
                            type: 'success'
                        });
                        return;
                    }
                })
            }
        },
        computed:{
            Title(){
                return function(objName){
                    var booksLenght =  Object.keys(this.books)
                    var idx  = booksLenght.indexOf(objName)
                    return this.titles[idx]
                }
            }
                
        },
        mounted(){
            //hot轮播图请求
            window._this = this;
            var num = 3;
            var type = 1;
            this.$get("/api/public/findHot/"+num+"/"+type).then(
                function(resp) {
                    _this.hots = resp.data.data;
                }
            )

            var str = ["findRate5","findSale5","findFav5"];
            var obj = ["rateBook" ,"saleBook" ,"favBook" ];
            for (const key in str) {
                this.$get("/api/public/book/"+str[key])
                .then(function(resp) {
                    _this.books[obj[key]]  = resp.data.data;
                })
            }

        }
    }
</script>
<style scoped="scoped">

    .selectBook{
        margin: 5px 0px;
        height: 40px;
        display: flex;
        justify-content:space-between;
        align-items: center;
    }
    .sel_div1{
        border:1px solid;
        border-radius:5px;
        line-height:36px;
        text-align: center;
        cursor: pointer;
        background-color: hotpink;
        color: white
    }
    .cont{
        width: 98%;
        margin: 10px auto;
    }
</style>
